<template>
    <el-row>
        <el-col :span="field.width" v-for="field in labelDict" v-if="field.isCondition" class="search-module">
            <el-form-item :label="field.fieldName">
                <TemplateField v-model="field['inputValue']" :fieldData="field" @changeFile="setFormFile" :disabled="true"></TemplateField>
            </el-form-item>
        </el-col>
    </el-row>
</template>

<script>
import TemplateField from './template-field'

export default {
  name: 'tempalte-module',
  components: { TemplateField },
  data() {
    return {
      labelDict: [],
      rules: {}
    }
  },
  props: {
    formData: {
      type: Object,
      default() {
        return {};
      },
    }
  },
  model: {
    prop: 'value',
    event: 'handlerValueChange'
  },
  watch: {
    formData: {
      handler(v, o) {
        if (v) {
          for (let i = 0; i < this.labelDict.length; i++) {
            let f = this.labelDict[i];
            f['inputValue'] = v[f.field];
          }
        }
      },
      immediate: true,
      deep: true
    },
    labelDict: {
      handler(v, o) {
        let labelDictVal=[];
        for (let i = 0; i < v.length; i++) {
          this.formData[v[i].field] = v[i]['inputValue'];
          if (v[i]['inputValue']) {
            labelDictVal.push(v[i]);
          }
        }
        this.formData['labelDict'] = labelDictVal;
      },
      deep: true
    }
  },
  methods: {
    setFormFile(file, field) {
    },
    reset() {
      for (let i = 0; i < this.labelDict.length; i++) {
        let f = this.labelDict[i];
        f['inputValue'] = null;
      }
    },
    loadLabelDict() {
      this.$axiosInstance({
        method: 'get',
        url: '/labelDict/search',
      }).then((res) => {
        let { code, data } = res.data;
        if (code === 200) {
          this.labelDict = data;
          // for (let k in data) {
          //   this.ruleForm[data[k].field]= null;
          // }
        }
      }).catch((err) => {
      })
    }
  },
  created() {
    this.loadLabelDict();
  },
  mounted() {

  }
}
</script>

<style scoped>
    .search-module{
        margin-bottom: 10px;
    }
</style>
